<template>
  <h2>姓名:{{ name }}</h2>
  <h2>年龄:{{ age }}</h2>
  <h2>展示薪水:{{job.j1.salery}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salery++">涨薪</button>
</template>

<script>
//toref  打开注释添加
import { reactive,toRefs } from "vue";

export default {
  name: 'Demo',
  setup() {
    //数据
    let person = reactive({
      name: '张三',
      age: 18,
      job:{
        j1:{
          salery:20
        }
      }
    })


/*TODO toRef实现响应式的数据,改的是person里的真实数据
    return {
      name:toRef(person,'name'),
      age:toRef(person,'age'),
      salery: toRef(person.job.j1,'salery')
    }*/
    return{
      ...toRefs(person)
    }
  }
}
</script>

<style>
</style>
